<template>
    <section
        :style="{
            paddingTop: confDiy.paddingTop + 'px',
            paddingBottom: confDiy.paddingBottom + 'px',
            marginTop: confDiy.marginTop + 'px',
            marginBottom: confDiy.marginBottom + 'px',
            background: `linear-gradient(
                ${confDiy.bgEdg}deg,
                ${confDiy.bgColorOne},
                ${confDiy.bgColorTow},
                ${confDiy.bgColorThree})`
        }"
    >
        <div class="m-auto px-10">
            <div
                v-if="confDiy.title || confDiy.intro"
                class="flex flex-col gap-1.5"
                :style="{ marginBottom: confDiy.headerBottom + 'px' }"
            >
                <h3
                    v-if="confDiy.title"
                    class="text-center text-7xl font-bold"
                    :style="{ color: confDiy.titleColor }"
                >
                    {{ confDiy.title }}
                </h3>

                <p
                    v-if="confDiy.intro"
                    class="text-center"
                    :style="{ color: confDiy.introColor }"
                >
                    {{ confDiy.intro }}
                </p>
            </div>

            <template v-for="(item, index) in dataDiy">
                <div
                    v-if="item.isEnable"
                    :key="index"
                    class="border mb-7 last:mb-0 hover:shadow-sm"
                    :style="{
                        padding: '20px 30px',
                        borderRadius: item.brRadius + 'px',
                        borderColor: item.brColor,
                        background: item.bgColor
                    }"
                >
                    <h3
                        class="text-[#303133] tracking-[4px] text-2xl leading-[30px] font-medium"
                        :style="{
                            color: item.titleColor
                        }"
                    >
                        {{ item.title }}
                    </h3>

                    <p
                        class="text-lg leading-[30px] mt-3.5"
                        :style="{
                            color: item.contentColor
                        }"
                    >
                        {{ item.content }}
                    </p>
                </div>
            </template>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { ProblemConfigType, ProblemDataType } from '../index.ts'

const props = defineProps({
    diyData: {
        type: Object,
        default: () => ({
            config: {} as ProblemConfigType,
            data: [] as ProblemDataType[]
        })
    }
})

// 装修数据
const confDiy = ref({} as ProblemConfigType)
const dataDiy = ref([] as ProblemDataType[])

// 监听数据
watch(
    () => props.diyData,
    (val) => {
        confDiy.value = val.config
        dataDiy.value = val.data
    }, { immediate: true }
)
</script>
